<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <cpnc></cpnc>
    <cpnc></cpnc>
    <cpnc></cpnc>
</div>

<template id="temp">
    <div>
        <button @click="increment">+</button>
        <button @click="decrement" v-bind:disabled="counter <= 1">-</button>
        <h2>{{counter}}</h2>
    </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 全部变量和局部变量
    const obj = {
        counter:0
    }
    // 变更为moudle
    const ci = Vue.extend({
        template:'#temp',
        data(){
            // return obj
            return {
                counter:0
            }
        },
        methods:{
            increment(){
                this.counter++;
            },
            decrement(){
                this.counter--;
            }
        }
    })


    const app = new Vue({
        el:'#app',
        data:{
            message:'abs'
        },
        components:{
            cpnc:ci
        }
    })
</script>
</body>
</html>